import React,{useState,useEffect} from "react";
import style from '../scc/Shopping.module.css';

export default function Shop() {
    const [sellerData, setSellerData] = useState({
            storeName: 'FENGDEKUN',
            storeId: '634418210199169',
            followers: 12,
            sold: 32,
            itemCount: 5,
            nearlySoldOut: 6,
            recommendedStock: 3,
            pricingConfirmed: 25,
            newArrivalConfirmed: 2,
            priceAdjustmentConfirmed: 16,
            deduction: 70000.00,
            afterSalesRate: 0.00,
            todaySales: 25,
            sevenDaySales: 2,
            thirtyDaySales: 16
        });
    return (
        <React.Fragment>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 20px' }}>

                <div className={style.shoppingtub}>
                    <span style={{ fontSize: '20px', fontWeight: 'bold' }}>{sellerData.storeName}</span><br />
                    <span style={{ marginLeft: '10px', fontSize: '14px' }}>ID: {sellerData.storeId}</span>
                </div>

                <button style={{ backgroundColor: '#ff6600', color: 'white', border: 'none', padding: '5px 10px' }}>
                    切换
                </button>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between' }}>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>即将售罄</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.nearlySoldOut}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>建议备货</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.recommendedStock}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>定价确认</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.pricingConfirmed}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>上新确认</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.newArrivalConfirmed}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>调价确认</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.priceAdjustmentConfirmed}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>扣款 (CNY)</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.deduction}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>售后</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.afterSalesRate}%</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>今日销量</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.todaySales}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>近7日销量</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.sevenDaySales}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
                <div style={{ width: '200px', border: '1px solid #e8e8e8', borderRadius: '4px', padding: '10px', marginBottom: '20px' }}>
                    <span style={{ fontSize: '14px', color: '#999' }}>近30日销量</span>
                    <span style={{ display: 'block', fontSize: '20px', fontWeight: 'bold', marginTop: '5px' }}>{sellerData.thirtyDaySales}</span>
                    <a href="#" style={{ fontSize: '12px', color: '#1890ff' }}>查看</a>
                </div>
            </div>
        </React.Fragment>
    )
}